import React from 'react';
import QuestionsLayout from '../../components/questions-layout';
import Tag from '../../components/tag';
import Question from '../../components/question';
import Progress from '../../components/progress';
import useQuestionData from '../../hooks/use-questions-data';

const Questions = () => {
  const { step, data, jumpToNextQuestion, jumpToLastQuestion, changeSelect } =
    useQuestionData();
  return (
    <QuestionsLayout>
      <Progress step={step} />
      <Tag>共19道，当前第{step + 1}题</Tag>
      <Question
        step={step}
        data={data}
        jumpToNextQuestion={jumpToNextQuestion}
        jumpToLastQuestion={jumpToLastQuestion}
        changeSelect={changeSelect}
      />
    </QuestionsLayout>
  );
};

export default Questions;
